{include file="public/head"/}
<link rel="stylesheet" href="__PUBLIC__phone/css/order.css"/>
<body>
<!--头部-->
<header id="headers">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <a href="javascript:;" class="leftRuted glyphicon glyphicon-menu-left pull-left" ></a>
                <p>订单详情</p>
            </div>
        </div>
    </div>
</header>
<!-- 订单详情 -->
<div class="orderDetails normalBox">
    <div class="container orderWrap">
        <div class="panel panel-default">
            <ul class="list-group">
                <li class="list-group-item">
                    订单号：
                    <span>{$details.order_number}</span>
                </li>
                <li class="list-group-item">
                    订单状态：<span id="order_status">{$details.status_text}</span>
                </li>
                <li class="list-group-item">下单时间：<span>{$details.addtime}</span></li>
                <li class="list-group-item">
                    <div class=" container">
                        <div class="row">
                            <div class=" col-xs-5">配送方式：<span>{$details.express}</span></div>
                            <div class=" col-xs-7">含运费：<span>￥{$details.freight}</span></div>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">快递单号：{$details.express_number}<span></span></li>
                <li class="list-group-item">订单备注：<span>{$details.remarks}</span></li>
            </ul>
        </div>
        <div class="panel panel-default bottom-border">
            <div class="panel-heading">卡片详情：</div>
            {volist name="details.order_info.card" id="ca"}
            <ul class="list-group">
                <li class="list-group-item">
                    <span>{$ca.total}/{$ca.pkg_kind}套餐</span>  
                    <span>{$ca.operator}</span> 
                    <span>{$ca.guige}</span>  
                    <span> {$ca.card_type}</span>
                </li>
                <li class="list-group-item">套餐价格(元)：<span>￥{$ca.price}</span></li>
                <li class="list-group-item">单张卡费(元)：<span>￥{$ca.gg_price}</span></li>
                <li class="list-group-item">
                    <div class=" container">
                        <div class="row">
                            <div class=" col-xs-5">订购周期：<span>{$ca.cycle}{$ca.pkg_kind}</span></div>
                            <div class=" col-xs-5">卡片数量(张)：<span>{$ca.number}</span></div>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">小计(元)：<span>￥{$ca.small_plan}</span></li>
                <li class="list-group-item">是否划拨：<span>{$ca.flag}</span></li>
            </ul>
            {/volist}
        </div>
        <div class="panel panel-default noborders">
            <ul class="list-group">
                <li class="list-group-item">
                    <div class="disbox">
                        <div >总卡数(张):<span>{$details.total_number}</span></div>
                        <div  >合计(元):<span>￥{$details.total_money}</span></div>
                        <div >应付金额(元):<span>￥{$details.money}</span></div>
                    </div>
                </li>
                <li class="list-group-item">*根据运营商规则，物联网卡一经售出不予退换</li>
            </ul>
        </div>
    </div>
</div>
{if condition="$details['status'] eq '2'"}
<div class="bottombg">
</div>
<div class="navbar navbar-fixed-bottom bottomBox">
    <div class="container">
        <div class="row">
            <div class="col-xs-4 pads">
                <a href="{:url('/home/Order/payment',['order_number'=>$details['order_number']])}" class="btn payment">确认支付</a>
            </div>
            <div class="col-xs-4 pads">
                <a href="javascript:;" class="btn cancel">取消订单</a>
            </div>
        </div>
    </div>
</div>
<!--确认取消订单-->
<div class="modal fade" id="cancelModal">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <!-- 隐藏需要取消订单的id -->
                <input type="hidden" id="cancelHaulId"/>
                <p>您确认要取消订单？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="cancelHaulBtn">确认</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        var oId;
        $('.bottomBox').on('click','.cancel',function(){
            oId = "<?php echo $details['id'] ?>";
            $("#cancelHaulId").val(oId);
            $("#cancelModal").modal('show');
        })

        // 取消订单
        $('#cancelHaulBtn').on('click',function(data){
            $.post("{:url('/home/Order/cancelOrder')}",{'id':oId},function(data){
                $('#cancelModal').modal('hide');   // 隐藏弹窗
                $('#cancelModal').on('hidden.bs.modal',function(){   // 弹窗完全隐藏之后提示结果
                    reminder(data.msg);
                })
                if(!data.code){
                   $('.bottombg,.bottomBox').remove();   // 清除底部区域以及弹窗
                   $('#order_status').text('已取消');   // 改变订单状态
                }
            });
        })

    })
</script>
{/if}
</body>
</html>